<template>
    <div class="Teachersdetails">
        <div class="Teachersdetails-head">
            <span>{{nick_names}}的主页</span>
            <label class="Teachersdetails-nav">
                <ul>
                    <li v-for="(item,indexsss) in NavList" :key="indexsss" @click="ToChecked(indexsss)" :class="NavListIndex == indexsss?'Chedsed':''">
                        {{item}}
                    </li>
                </ul>
            </label>
        </div>
        <div v-if="NavListIndex ==0">
            <div class="Personaldetails-content">
                <div class="Personaldetails-heads">
                    <label>
                        <label>
                            <el-image 
                                :src="imgavater" 
                                :preview-src-list="srcList"
                                class="elimg">
                            </el-image>
                            <!-- <img :src="imgavater" alt="" class="Personaldetails-avater"> -->
                        </label>
                        <label>
                            <img src="/images/椭圆 29@2x.png" alt="" @click="LockMore()" style="margin-right: 20px;">
                            <ul class="LockMores" v-show="LockMoreShow">
                                <li>拉黑</li>
                                <li>举报</li>
                            </ul>
                        </label>
                    </label>
                     <label class="Thenames">
                        <span>{{nick_names}}</span>
                        <span>设置备注</span>
                    </label>
                     <label class="ctyls">
                        <span>{{country}}·{{city}}</span>
                    </label>
                     <label class="giftslist">
                        <span>
                            <img src="/images/图层 40@2x.png" alt="">
                        </span>
                        <span @click="isLike">
                            <img :src="isAixin?'/images/爱心.png':'/images/图层 39@2x.png'" alt="">
                        </span>
                        <span>
                            <img src="/images/泡泡.png" alt="">
                        </span>
                    </label>
                </div>
                <div class="Personaldetails-contents">
                    <div class="Personaldetails-contents-Nav">
                        <ul>
                            <li v-for="(item,Thekey) in PersonaldetailsNavs" 
                            :key="Thekey" 
                            @click="PersonaldetailsSEd(Thekey)"
                            :class="PersonaldetailsNavskeys ==Thekey?'Personaldetails-contents-seled':'' "
                            >{{item}}</li>
                        </ul>
                    </div>
                    <div class="Thebasicinformation" v-if="PersonaldetailsNavskeys ==0">
                        <div class="Thebasicinformation-left" v-for="(infos,infosindex) in TheInfos" :key="infosindex">
                            <label class="Thebasicinformation-left-title">
                                <span>基本信息</span>
                            </label>
                            <label>
                                <span>国籍：</span>
                                <span>{{infos.userInfoEntity.country}}</span>
                            </label>
                            <label>
                                <span>故乡：</span>
                                <span>{{infos.userInfoEntity.country}}·{{infos.userInfoEntity.city}}</span>
                            </label>
                            <label>
                                <span>掌握语言：</span>
                                <span>汉语/英语/波兰语</span>
                            </label>
                            <label>
                                <span>偏好：</span>
                                <span>外语学习</span>
                            </label>
                            <label>
                                <span>关系：</span>
                                <span>无</span>
                            </label>
                            <label>
                                <span>实名认证：</span>
                                <span>未认证</span>
                            </label>
                            <label>
                                <span>境外身份认证：</span>
                                <span>留学生</span>
                            </label>
                        </div>
                        <div class="Thebasicinformation-right">
                            <label class="Thebasicinformation-left-title">
                                <span>相册</span>
                            </label>
                            <div class="Pictilist" v-if="myImg.length == 0" style="text-align: center;">
                                    暂无数据
                            </div>
                            <div class="Pictilist" v-else>
                                <ul>
                                    <li v-for="(itemmyImg,myImgindex) in myImg[0].photo[0]" :key="myImgindex">
                                        <img :src="itemmyImg" alt="" v-image-preview>
                                    </li>
                                    <li class="holder" v-for="(i,indax) in holder" :key="indax"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="PersonaldetailsNavskeys == 1">
                        <div class="Mydynamic-content-dynamiclist" v-for="(item,index) in mynote" :key="index">
                            <div class="Mydynamic-content-dynamiclist-head">
                                <label>
                                    <img :src="item.map.userinfo.avatar" alt="">
                                </label>
                                <label>
                                    <span>{{item.map.userinfo.nick_name}}</span>
                                    <span style="margin-top: -12px;">{{item.create_time}}前</span>
                                </label>
                            </div>
                            <div class="dynamiclist-content">
                                <img src="/images/翻译.png" alt="" style="width: 22px;position: absolute;top: -22px;left: 54px;">
                                <label class="contents-info">
                                    <span>{{item.content}}</span>
                                </label>
                                <ul class="contents-infoimg">
                                    <li v-for="(picts,ind) in item.pcits[0]" :key="ind">
                                        <el-image 
                                            :src="picts" 
                                            :preview-src-list="item.pcits[0]"
                                            class="elimg">
                                        </el-image>
                                        <!-- <img :src="picts" alt="" v-image-preview> -->
                                    </li>
                                </ul>
                                <ul v-if="item.map.likeinfo.length == 0">
                                </ul>
                                <ul class="givealike" v-else>
                                
                                    <li v-for="(likeinfo,likeinfoindex) in item.map.likeinfo" :key="likeinfoindex">
                                        {{likeinfo.nick_name}}，
                                    </li>
                                </ul>
                                <ul class="operation">
                                    <li>
                                        <img src="/images/礼物.png" alt="">
                                        <span>{{item.map.giftCount}}</span>
                                    </li>
                                    <li>
                                        <img src="/images/分享.png" alt="">
                                        <span>{{item.like_count}}</span>
                                    </li>
                                    <li @click="Tocomments(index)">
                                        <img src="/images/图层 36@2x.png" alt="">
                                        <span>{{item.comment_count}}</span>
                                    </li>
                                    <li>
                                        <img src="/images/点赞.png" alt="" v-if="item.like_count == 0" @click="dianzan(item)">
                                        <img src="/images/已经点赞.png" alt="" v-if="item.like_count" @click="dianzan(item)">
                                        <span>{{item.map.likeinfo.length}}</span>
                                    </li>
                                </ul>
                                <label class="theInputcomments" v-show="Iscomments && commentsShow == index">
                                    <img :src="unserinfo.avatar" alt="">
                                    <el-input
                                        placeholder="请输入内容"
                                        v-model="Inputcomments"
                                        clearable>
                                    </el-input>
                                    <span>评论</span>
                                </label>
                                <div v-for="(notes,notesindex) in item.map.noteCommentEntities" :key="notesindex">
                                    <div v-if="notes.is_reply">
                                        <div class="comments-content" @click.stop="Tocomments(index,notes.id)">
                                            <label>
                                                <label>
                                                    <img :src="notes.map.userinfo.avatar" alt="">
                                                </label>
                                                <label>
                                                    <span>{{notes.map.userinfo.nick_name}}</span>
                                                    <span>{{notes.content}}</span>
                                                    <span>2小时前</span>
                                                </label>
                                            </label>
                                        </div>
                                        <div class="reply-content" @click.prevent="Tocomments(index,notes.id)">
                                            <label>
                                                <label>
                                                    <img :src="notes.map.replyinfo.avatar" alt="">
                                                </label>
                                                <label class="reply-infos">
                                                    <span>{{notes.map.userinfo.nick_name}}</span>
                                                    <span style="color:#C2C2C2">回复</span>
                                                    <span>{{notes.map.replyinfo.nick_name}}</span>
                                                    <span>{{notes.content}}</span>
                                                    <span>2小时前</span>
                                                </label>
                                            </label>
                                        </div> 
                                    </div>
                                    <div v-else>
                                        <div class="comments-content" @click.stop="Tocomments(index,notes.id)">
                                            <label>
                                                <label>
                                                    <img :src="notes.map.userinfo.avatar" alt="">
                                                </label>
                                                <label>
                                                    <span>{{notes.map.userinfo.nick_name}}</span>
                                                    <span>{{notes.content}}</span>
                                                    <span>2小时前</span>
                                                </label>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Pictilist" v-if="mynote.length == 0" style="text-align: center;margin-top: 30px;">
                                暂无数据
                        </div>
                        <div class="load-more mr-bottom" v-if="mynote.length !== 0"  @click='loadMore' >点击加载更多</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="NavListIndex ==1">
            <div class="Teachersdetails-info">
                <div class="Teachersdetails-info-left" v-for="(items,indexd) in TheInfos" :key="indexd">
                    <label >
                        <img :src="imgavater" alt="">
                    </label>
                    <label>
                        <span>{{nick_names}}</span>
                        <span>{{country}}·{{city}}</span>
                    </label>
                </div>
                <div class="Teachersdetails-info-right" v-for="(item,indedx) in TeacherInfos" :key="indedx">
                    <label>
                        <span>班级数量：</span>
                        <span>{{item.groupClassCount}}</span>
                    </label>
                    <label>
                        <span>最近课程：</span>
                        <span>{{item.week?item.week:'暂无课程'}}</span>
                        <span :style="item.curriculumTime == undefined?'display:none;':''">{{item.curriculumTime}}</span>
                    </label>
                    <label class="classinfos">
                        <span>累计课时：</span>
                        <span>{{item.classCount}}</span>
                        <span>本月课时：</span>
                        <span>{{item.courseCount}}</span>
                        <span>剩余课时：</span>
                        <span>{{item.residueCount}}</span>
                    </label>
                    <label>
                        <span>入驻时间：</span>
                        <span>{{item.create_time}}</span>
                    </label>
                </div>
            </div>
            <div class="Teachersdetails-content">
                <div class="Teachersdetails-navs">
                    <ul>
                        <li v-for="(item,indexq) in Teachersdetailsnavs" :key="indexq" @click="SelectedNav(indexq)" :class="TeachersdetailsnavsIndex == indexq?'navSeled':''">{{item}}</li>
                    </ul>
                </div>
                <div class="Teachersdetails-con" v-if="TeachersdetailsnavsIndex == 0">
                    <ul v-if="TeachcourseInfoList.length == 0" class="Thecurriculum">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无课程安排</span>
                            </label>
                        </div>
                    </ul>
                    <ul class="Thecurriculum" v-else>
                        <li v-for="(item,indexw) in TeachcourseInfoList" :key="indexw" @click="Todeils(item)">
                            <div class="Teachcourse-class-List-content">
                                <label>
                                    <img :src="item.cover" alt="">
                                </label>
                                <label class="Teachcourse-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                        <!-- <img src="/images/圆角矩形 37 拷贝 3@2x.png" @click="Modifyprogram"/> -->
                                    </label>
                                    <label class="Teachcourse-class-Infos">
                                        <img src="/images/视频直播icon@2x.png" v-if="item.classroom_type == 'online_video'"/>
                                        <img src="/images/语音直播@2x.png" v-else/>
                                        <span>{{item.map.groupinfo.group_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.language_level}}</span>
                                        <span>{{item.language}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Isopenclasses">
                                        <span>{{item.timers}}</span>
                                        <span @click.stop="GoInfo(item)">进入班级</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div class="Lvie-cl-de-con-pagination">
                        <el-pagination :current-page="currentPage" @current-change="handleCurrentChangeGetcurriculumList" background layout="prev, pager, next" :total="1000"></el-pagination>
                    </div>
                </div>
                <div class="Teachersdetails-con" v-else-if="TeachersdetailsnavsIndex == 1">
                    <ul v-if="HistorycoursesList.length == 0" class="Historycourses">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无完成课程</span>
                            </label>
                        </div>
                    </ul>
                    <ul class="Historycourses" v-else>
                        <li v-for="(item,indexe) in HistorycoursesList" :key="indexe" @click="Todeils(item,1)">
                            <label>
                                <img :src="item.cover" alt="">
                            </label>
                            <label>
                                <label>
                                    <span>{{item.title}}</span>
                                </label>
                                <label>
                                    <span>参与人数</span>
                                    <span>{{item.map.peopleNum}}</span>
                                </label>
                                <label>
                                    <span>评论</span>
                                    <span>{{item.map.commentCoumt}}</span>
                                </label>
                                <label>
                                    <span>{{item.create_time}}</span>
                                    <span>{{item.start_time}}-{{item.end_time}}</span>
                                </label>
                            </label>
                            
                        </li>
                    </ul>
                    <div class="Lvie-cl-de-con-pagination">
                        <el-pagination :current-page="currentPage" @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
                    </div>
                </div>
                <div class="Teachersdetails-con" v-else-if="TeachersdetailsnavsIndex == 2">
                    <ul v-if="HistorycoursesList.length == 0" class="Theclass-ul">
                        <div  class="Summarylist-nodatads">
                            <label>
                                <img src="/images/圆角矩形 523@2x.png" alt="">
                                <span>暂无班级</span>
                            </label>
                        </div>
                    </ul>
                    <ul class="Theclass-ul" v-else>
                        <li v-for="(item,index) in TheclassList" :key="index" @click.stop="GoInfo(item,'hist')">
                            <label>
                                <img :src="item.faceUrl" alt="">
                            </label>
                            <label class="Theclass-ul-infos">
                                <span>{{item.group_name}}</span>
                                <span v-if="item.type == 'online_voice'">语言直播</span>
                                <span v-else>视频直播</span>
                            </label>
                            <label class="Theclass-ul-footer">
                                <span>{{item.age_grade}}</span>
                                <span>{{item.create_time}}</span>
                            </label>
                        </li>
                        <li class="holder1" v-for="(i,indax) in holder1" :key="indax" style="opacity:0; width:19%;"></li>
                    </ul>
                    <div class="Lvie-cl-de-con-pagination">
                        <el-pagination :currentPages='currentPages' @current-change="handleCurrentChanges" background layout="prev, pager, next" :total="1000"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="NavListIndex ==2">
            <Lecturersdetial :routerData="userid"></Lecturersdetial>
        </div>
        <div v-else-if="NavListIndex ==3">
            <sijiaoDetial :routerData="userid"></sijiaoDetial>
        </div>
        
    </div>
</template>
<script>
import Lecturersdetial from './lecturersdetial'
import sijiaoDetial from './sijiaoDetial'
export default {
    name:'Teachersdetails',
    computed:{
        holder(){
            let a = (this.myImg[0].photo[0].length%4)== 0? 4:(this.myImg[0].photo[0].length%4)
            return 4 - a
        },
        holder1(){
            let a = (this.TheclassList.length%4) == 0 ? 4 :(this.TheclassList.length%4)
            return 4 - a
        }
    },
    data(){
        return{
            NavList:['个人详情','直播讲师详情','助学师详情','私教详情'],
            NavListIndex:this.$route.query.NavListIndex == undefined ? 1 : this.$route.query.NavListIndex,
            Teachersdetailsnavs:['课程表','历史课程','班级'],
            TeachersdetailsnavsIndex:1,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            userid:this.$route.query.userid,
            TeacherInfos:[],
            HistorycoursesList:[],
            currentPage:1,
            TeachcourseInfoList:[],
            isAixin:false,
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
            TheclassList:[],
            TheInfos:[],
            nick_names:'',
            imgavater:'',
            srcList:[],
            countrer:'',
            city:'',
            country:'',
            LockMoreShow:false,
            PersonaldetailsNavs:['基本信息','动态'],
            PersonaldetailsNavskeys:0,
            myImg:[],

            //助学师的值
            HelpTeacher:['基本信息','课程表','历史课程','评论'],
            HelpTeacherIndex:1,
            commentsShow:-1,

            currentPages:1,

            //动态
            Inputcomments:'',
            Iscomments:false,
            mynote:[],
            picts:[],
            page_count: ''
        }
    },
    components: {//组件注册
        Lecturersdetial,
        sijiaoDetial
    },
    created(){
        this.GetClassInfo()
        this.GetHistorlyList()
        this.GetUserinfo()
        this.GetimageUrl()
        this.GetnoteUser()
        this.toTop()
    },
    mounted(){
        this.GetnoteUser()

    },
    methods:{
        handleTime(oldTime){//处理时间
            let d = new Date(oldTime)
            let b = d.getTime(d)
            let now = new Date()
            let nowT = now.getTime(now)
            let chazhi = nowT - b
            if(Math.floor(chazhi/946080000000) !== 0){//年
                return Math.floor(chazhi/946080000000) + '年'
            }else if(Math.floor(chazhi/2592000000) !== 0){
                return Math.floor(chazhi/2592000000)  + '月'
            }else if(Math.floor(chazhi/86400000) !== 0){
                return Math.floor(chazhi/86400000)  + '天'
            }else if(Math.floor(chazhi/3600000) !== 0){
                return Math.floor(chazhi/3600000)  + '小时'
            }else if(Math.floor(chazhi/60000) !== 0){
                return Math.floor(chazhi/60000)  + '分钟'
            }else if(Math.floor(chazhi/1000) !== 0){
                return Math.floor(chazhi/1000)  + '秒'
            }
        },
        dianzan(e){
            let data = {
                user_id: this.unserinfo.user_id,
                history_type: "note",
                operation_type: "like",
                history_id: e.id,
            }
            this.$axios({
                method:'POST',
                url:'https://www.curiousmore.com/qmore/news/history/insert',
                data:data,
            }).then((res) =>{
                console.log(res,'点赞')

            }).catch((error) =>{
                console.log(error)
            })
        },
        isLike(){
            let data = {
                other_user_id	:this.$route.query.routerData == undefined ? this.userid : this.$route.query.routerData,
                user_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/userLike/insert',
                data:data,
            }).then((res) =>{
                console.log(res,'添加喜欢')
                if(res.data.code == 0){
                    this.isAixin = !this.isAixin
                }
            }).catch((error) =>{
                console.log(error)
            })
        },
        toTop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;// 实现滚动效果 
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        },
        SelectedNav(e){
            console.log(e)
            this.TeachersdetailsnavsIndex = e
            if(this.TeachersdetailsnavsIndex == 1){
                this.GetHistorlyList()
            }else if(this.TeachersdetailsnavsIndex == 0){
                this.GetcurriculumList()
            }else if(this.TeachersdetailsnavsIndex == 2){
                this.TheclassLists()
            }
            this.currentPage = 1
        },
        Todeils(item,Isend){
            if(Isend == 1){
                this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.id,Isend:true}})
            }else{
                this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.id}})
            }
            
        },
        GoInfo(item,hist){//直播讲师进入班级
            console.log(hist,'9989')
            if(hist){
                 this.$router.push({path:'/views/Teachingcenters/Classdetails',query: {id: item.id}})
            }else{
                 this.$router.push({path:'/views/Teachingcenters/Classdetails',query: {id: item.map.groupinfo.id}})
            } 
        },
        GetUserinfo(){//查询用户信息
            var data ={
                user_id	:this.$route.query.routerData == undefined ? this.userid : this.$route.query.routerData,
                oper_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user//userInfo/queryUserInfoById',
                params:data,
            }).then((res) =>{
                console.log(res.data,'直播讲师信息')
                this.TheInfos = []
                this.TheInfos.push(res.data.data)
                this.isAixin = res.data.data.is_like
                this.nick_names = res.data.data.userInfoEntity.nick_name
                this.imgavater = res.data.data.userInfoEntity.avatar
                this.city = res.data.data.userInfoEntity.city
                this.country = res.data.data.userInfoEntity.country
                
                console.log(res.data.data,'查询是否喜欢')
                this.GetClassInfo()
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.GetHistorlyList()
        },
        handleCurrentChanges(val){
            this.currentPages = val
            this.TheclassLists()
        },
        handleCurrentChangeGetcurriculumList(val){
            this.currentPage = val
            this.GetcurriculumList()
        },
        GetHistorlyList(){
            var data = {
                currentPage:this.currentPage,
                master_id:this.userid,
                pageSize:6,
                type :'open_class'
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHistoryListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'助学师信息')
                this.HistorycoursesList = res.data.data
                this.HistorycoursesList.forEach(e => {
                    var stars = e.start_time
                    var entimes = e.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    e['create_time'] = times
                    e['start_time'] = starttime
                    e['end_time'] = endtime
                    this.Thetheme.forEach(is=>{
                            if(is[e['title']]){
                                e['title'] = is[e['title']]
                            }
                        })
                });
            }).catch((error) =>{
                console.log(error)
            })
        },
        GetClassInfo(){
            var data = {
                type:'live_lecturer',
                user_id:this.$route.query.routerData == undefined ? this.userid : this.$route.query.routerData,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterInfo/queryTeachingCenter',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'直播讲师详情信息')
                    this.TeacherInfos = []
                    let infoList = {}
                    let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; 
                    res.data.data.map(item=>{
                        if(item.map.mastertype.name == '直播讲师'){
                            if(item.map.latelyclass[0] !== undefined){
                                infoList.curriculumTime = item.map.latelyclass[0].start_time.substr(11,5) + '~' + item.map.latelyclass[0].end_time.substr(11,5)
                                let myDate = new Date(Date.parse(item.map.latelyclass[0].start_time.substr(0,10)));
                                infoList.week =item.map.latelyclass[0].start_time.substr(0,10) == _this.date ? '今天' : weekDay[myDate.getDay()]
                            }else{
                                infoList.week = false
                            }
                            infoList.create_time = item.map.mastertype.create_time.substr(0,10)
                            infoList.classCount = item.map.classCount
                            infoList.courseCount = item.map.courseCount
                            infoList.residueCount = item.map.residueCount
                            infoList.groupClassCount = item.map.groupClassCount
                        }
                    })
                    this.TeacherInfos.push(infoList)
                    console.log(this.TeacherInfos)
                }).catch((error) =>{
                    console.log(error)
            })
        },
        TheclassLists(){
            this.TheclassList = []
            var data = {
                currentPage:this.currentPages,
                pageSize :8,
                owner_id:this.userid,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message/messageGroup/queryMyListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'我的班级')
                    this.TheclassList = res.data.data
                    this.TheclassList.forEach(e=>{
                        var stars = e.create_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        e['create_time'] = times
                        if(e.age_grade == 'University Student'){
                            e['age_grade'] = '大学生'
                        }else if(e.age_grade == 'Teenagers'){
                            e['age_grade'] = '青少年'
                        }else if(e.age_grade == 'Adult'){
                            e['age_grade'] = '成年'
                        }else if(e.age_grade == 'childhood '){
                            e['age_grade'] = '儿童'
                        }
                    })
                }).catch((error) =>{
                    console.log(error)
            })
        },
        
        GetcurriculumList(){
            var data ={
                currentPage:this.currentPage,
                pageSize:4,
                type:"open_class",
                master_id:this.$route.query.userid == undefined ? this.unserinfo.user_id : this.$route.query.userid
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryBeginListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'该老师的课程')
                    this.TeachcourseInfoList = res.data.data
                    this.TeachcourseInfoList.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times));  
                        e['create_time'] = times
                        e['start_time'] = starttime
                        e['end_time'] = endtime
                        if(e.language_level == 'Zero basis'){
                            e['language_level'] = '零基础'
                        }else if(e.language_level == 'Intermediate'){
                            e['language_level'] = '中级'
                        }else if(e.language_level == 'Primary'){
                            e['language_level'] = '初级'
                        }else if(e.language_level == 'Senior'){
                            e['language_level'] = '高级'
                        }
                        this.languageEn.forEach(function(j){
                            if(j[e['language']]){
                                e['language']=j[e['language']]
                            } 
                        })
                        this.Thetheme.forEach(is=>{
                            if(is[e['title']]){
                                e['title'] = is[e['title']]
                            }
                        })
                    })
                }).catch((error) =>{
                    console.log(error)
            })
        },
        Modifyprogram(){//修改课程
            this.$router.push({path:'/views/Teachingcenters/Modifyprogram'})
        },
        ToChecked(e){
            console.log(e)
            this.NavListIndex = e
            if(this.NavListIndex == 1){
                this.GetUserinfo()
                this.GetClassInfo()
            }else if (this.NavListIndex == 0){
                this.GetUserinfo()
                this.GetClassInfo()
            }
            this.currentPage = 1
        },
        LockMore(){//个人详情操作
            this.LockMoreShow =! this.LockMoreShow
        },
        PersonaldetailsSEd(e){
            this.PersonaldetailsNavskeys =e
        },
        GetimageUrl(){
            var data ={
                user_id : $route.query.routerData == undefined ? this.userid : this.$route.query.routerData
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAlbum/query',
                params:data,
            }).then((res) =>{
                this.myImg = res.data.data    
                this.myImg.forEach(e => {
                    var arr = []
                    var ss = e.photo.split(',')
                    arr.push(ss)
                    e['photo'] = arr 
                });
                console.log(res.data.data,'我的图片')
            }).catch((error) =>{
                console.log(error)
            })
        },


        Tocomments(index,id){
            console.log(this.Iscomments)
            console.log(index,id,'haha')
            if(id !== undefined){
                if(this.showId == -1){
                    this.showId = id
                    this.commentsShow = index
                    this.Iscomments = !this.Iscomments
                }else{
                    if(id == this.showId){
                        this.Iscomments = !this.Iscomments
                        this.commentsShow = index
                    }else{
                        this.commentsShow = index
                        this.showId = id
                    }
                }
                
            }else{
                this.Iscomments = !this.Iscomments
                this.commentsShow = index
            }
        },
        loadMore(){
            this.currentPage +=1
            var data ={
                currentPage:this.currentPage,
                pageSize:4,
                user_id:this.userid
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message/noteUser/queryListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data)
                    this.mynote = this.mynote.concat(res.data.data)   
                    this.mynote.forEach(e => {
                        var arr = []
                        var ss = e.picts.split(',')
                        arr.push(ss)
                        e['pcits'] = arr 
                        e.create_time = this.handleTime(e.create_time)
                    });
                    console.log(this.mynote,'动态info')
                }).catch((error) =>{
                    console.log(error)
            })
        },
        GetnoteUser(){
            var data ={
                currentPage:this.currentPage,
                pageSize:4,
                user_id:this.userid
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/message/noteUser/queryListPage',
                params:data,
                }).then((res) =>{
                    this.mynote = res.data.data    
                    this.mynote.forEach(e => {
                        var arr = []
                        var ss = e.picts.split(',')
                        arr.push(ss)
                        e['pcits'] = arr 
                        e.create_time = this.handleTime(e.create_time)
                    });
                    console.log(this.mynote,'动态info')
                }).catch((error) =>{
                    console.log(error)
            })
        },

        SeldHelpIndex(e){
            this.HelpTeacherIndex=e
        }
    }
}
</script>
<style lang="less" scoped>
    .Teachersdetails{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
        padding-bottom: 100px;
    }
    .Teachersdetails-head{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 100px;
        border-bottom: 1px solid #47CECF;
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #2DC7C8;
        font-weight: bold;
        padding-left: 2%;
    }
    .Teachersdetails-head>span{
        display: inline-block;
        width: 30%;
    }
    /*导航样式*/
    .Teachersdetails-nav{
        display: flex;
        width: 80%;
        ul{
            list-style: none;
            display: flex;
            width: 100%;
            justify-content: flex-end;
            padding: 0;
            height: 100%;
            li{
                // width: 16%;
                margin-left: 2%;
                height: 40px;
                color: #444444;
                text-align: center;
                font-size: 16px!important;
                font-weight: normal;
                cursor: pointer;
            }
        }
    }
    .Chedsed{
        border-bottom: 4px solid #2DC7C8;
        color: #2DC7C8!important;
        font-weight: bold!important;
    }
    /*教师信息样式*/
    .Teachersdetails-info{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 190px;
        background:rgba(241,241,241,1);
        border-radius:15px;
        margin-top: 40px;
        display: flex;
        align-items: center;
        div{
            width: 50%;
            height: 100%;
        }
    }
    .Teachersdetails-info-left{
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            align-items: center;
            justify-content: center;
            img{
                width: 103px;
                height:103px;
                border-radius: 50px;
            }
            span{
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding-left: 20%!important;
            }
        }
    }
    .Teachersdetails-info-left>label>span:first-child{
        color: #2B2B2B;
        font-weight: bold;
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .Teachersdetails-info-left>label>span:last-child{
        color: #AFAFAF;
        font-size: 16px;
        padding-left: 14%;
        background-image: url('/images/定位.png');
        background-repeat: no-repeat;
        background-size: auto;
        background-position-x: 2%;
        background-position-y: 34%;
    }
    .Teachersdetails-info-right{
        width: 50%;
        height: 70%!important;
        display: flex;
        flex-wrap: wrap;
        label{
            width: 100%;
            height: 30px;
            span{
                display: inline-block;
                height: 30px;
                line-height: 30px;
                color: #AFAFAF;
                padding-left: 2%;
                &:first-child{
                    color: #2B2B2B;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }
    .classinfos>span:nth-child(odd){
        color: #2B2B2B;
        font-size: 16px;
        font-weight: bold;
    }
    /*讲师导航样式*/
    .Teachersdetails-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 40px;
    }
    .Teachersdetails-navs{
        position: relative;
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f1f1f1;
        ul{
            width: 100%;
            list-style: none;
            padding: 0;
            height: 40px;
            display: flex;
            li{
                width: 10%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                cursor: pointer;
                font-size: 16px;
                color: #9E9E9E;
            }
        }
    }
    .navSeled{
       color: #2B2B2B!important;
       font-weight: bold; 
    }
    .Teachersdetails-con{
        position: relative;
        width: 100%;
    }
    .Historycourses{
        width: 100%;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        li{
            width: 48%;
            height: 185px;
            border:2px solid rgba(54,205,206,1);
            border-radius:20px;
            margin-top: 40px;
            display: flex;
            align-items: center;
        }
    }
    
    .Historycourses>li>label{
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        label{
            width: 100%;
            span{
                width: auto;
                margin-left: 4%;
                height: 36px;
                line-height: 36px;
                font-size: 15px;
                color: 15.09px;
            }
        }
    }
    .Historycourses>li>label:first-child{
        width: 40%!important;
        height: 80%;
        overflow: hidden;
        padding-left: 4%;
        img{
            width: 100%;
            overflow: hidden;
            border-radius: 10px;
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 0px;
        padding-top: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }

    /*课程表*/
    .Thecurriculum{
         display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
            }
    }
    .Teachcourse-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Teachcourse-class-List-content>label:first-child{
        width: 34%;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .Teachcourse-class-Info{
        width: 50%;
        height: 80%; 
        padding-left: 6%;
        h2{
            color: #555555;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 0;
        }
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 10%;
                    text-align: left;

                }
            }
        }
    }
    .Teachcourse-class-Info>.Teachcourse-class-Infos{
        margin-top: 10px;
        img{
            width: 40%;
        }
        span{
            &:first-child{
                display: inline-block;
                width: 44%;
                height: 26px;
                color: #FF5757;
                text-align: center;
                border-radius: 15px;
                border: 1px solid #FF5757;
            }
        }
    }
    .Isopenclasses{
        span{
            display: flex;
            &:first-child{
                width: 50%!important;
            }
            &:last-child{
                color: #FF4E00;
                cursor: pointer;
            }
        }
    }
    .Personalschedule-class-info-head{
        span{
            width: 100%!important;
            overflow: hidden;
            color: #555555;
            font-size: 18px;
            font-weight: bold;
        }
        img{
            cursor: pointer;
        }
    }


    /*班级详情样式*/
    .Theclass-ul{
        position: relative;
        width: 94%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        display: flex;
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 20%;
            height: 210px;
            border:1px solid rgba(45,199,200,1);
            border-radius:15px;
            overflow: hidden;
            margin-top: 10px;
            // &:first-child{
            //     margin: 0%;
            // }
        }
    }
    .holder1{
        width: 19%;
        height: 210px;
        border:1px solid rgba(45,199,200,1);
        border-radius:15px;
        overflow: hidden;
        margin-top: 10px;
    }
    .Theclass-ul>li>label:first-child{
        display: inline-block;
        width: 100%;
        height: 60%;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .Theclass-ul-infos{
        display: inline-block;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        span{
            display: inline-block;
            width: 40%;
            overflow: hidden;
            white-space: nowrap;
            &:first-child{
                color: #2D2D2D;
                font-weight:bold;
                font-size: 16px;
                text-align: center;
                overflow: hidden;
                padding-left: 6%;
            }
            &:last-child{
                font-size: 12px;
                color: #FF5D5D;
            }
        }
    }
    .Theclass-ul-footer{
        display: inline-block;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        span{
            width: 40%;
            &:first-child{
                color: #2D2D2D;
                font-size: 12px;
                text-align: center;
            }
            &:last-child{
                width: 60%;
                font-size: 12px;
                color: #A8A8A8;
                line-height: 20px;
                text-align: center;
            }
        } 
    }



    //个人详情样式
    .Personaldetails-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Personaldetails-heads{
        width: 100%;
        height: 210px;
        border-radius: 20px;
        margin-top: 60px;
        background-image: linear-gradient(#539fa0, #058283);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        
    }
    .Personaldetails-heads>label{
        width: 100%;
        height: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .Personaldetails-heads>label>label{
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &:first-child{
            justify-content:center;
            /deep/.el-image{
                display: flex;
                width: 40%;
                flex-wrap: wrap;
                padding-top: 30%;
                justify-content: center;
                img{
                    cursor: pointer;
                    width: 140px;
                    border-radius: 140px;
                }
            }
        }
        
    }
    .elimg{
        /deep/.el-icon-circle-close {
        color: white;
        }
    }
    .Personaldetails-avater{
        width: 110px;
        border-radius: 50px;
        margin-top: -15%;
    }
    .avater-img{
        background-image: url('/images/组 9@2x.png');
        background-size: 32px 32px;
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-position-x: -20%;
    }
    .LockMores{
        width: 120px;
        position: absolute;
        list-style: none;
        padding: 0;
        height: 110px;
        background: #ffffff;
        top: 30px;
        right: 2%;
        border-radius: 20%;
        li{
            text-align: center;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            color: #47CECF;
            font-size: 14px;
        }
    }
    .Thenames{
        span{
            display: flex;
            width: 100%;
            &:first-child{
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                justify-content: flex-end;
            }
            &:last-child{
                margin-left: 1%;
                color:rgba(255,255,255,0.6);
                font-size: 12px;
                cursor: pointer;
            }
        }
    }
    .ctyls{
        span{
            font-size: 12px;
            color: #FFFFFF;
            width: 20%;
            text-align: center;
            background-image: url('/images/位置.png');
            background-repeat: no-repeat;
            background-size: 12px;
            background-position-y: 50%;
            background-position-x: 20%;
            padding-left: 2%;
        }
    }
    .giftslist>span{
        width: 6%;
        text-align: center;
        img{
            width: 22px;
            cursor: pointer;
        }
    }
    .Personaldetails-contents{
        position: relative;
        width: 100%;
        margin-top: 30px;
    }
    .Personaldetails-contents-Nav{
        position: relative;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #E7E7E7;
    }
    .Personaldetails-contents-Nav>ul{
        list-style: none;
        display: flex;
        padding: 0;
        li{
            width: 8%;
            text-align: center;
            color: #A5A5A5;
            font-size: 16px;
            cursor: pointer;
        }
    }
    .Personaldetails-contents-seled{
        color: #2A2A2A!important;
        font-weight: bold;
    }
    .Thebasicinformation{
        position: relative;
        width: 94%;
        margin: 0 auto;
        margin-top: 30px;
        display: flex;
    }
    .Thebasicinformation-left,.Thebasicinformation-right{
        width: 50%;
    }
    .Thebasicinformation-left>label{
        display: flex;
        width: 100%;
        height: 50px;
        align-items: center;
        span{
            display: inline-block;
            
            &:nth-child(Odd){
                color: #3E3E3E;
                font-size: 14px;
                width: 40%;
            }
            &:nth-child(even ){
                color:rgba(183,183,183,0.9);
                width: 60%;
            }
        }
    }
    .Thebasicinformation-left-title>span{
        color: #3E3E3E;
        font-weight: bold;
    }
    .Pictilist{
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    .Pictilist>ul{
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 23%;
            height: 100px;
            margin-top: 30px;
            img{
                width: 100px;
                height: 100px;
                border-radius: 20px;
            }
        }
    }
    .holder{
        width: 23%;
        height: 100px;
        margin-top: 30px;
        opacity: 0;
        img{
            width: 100px;
            height: 100px;
            border-radius: 20px;
        }
    }



    /*动态*/
    .Mydynamic-content-dynamiclist{
        position: relative;
        width: 100%;
    }
    .Mydynamic-content-dynamiclist-head{
        position: relative;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        label{
            display: flex;
            &:first-child{
                width: 8%;
                height: 60px;
                display: flex;
                img{
                    width: 60px;
                    border-radius: 30px;
                }
            }
            &:last-child{
                width: 90%;
                flex-wrap: wrap;
                span{
                    display: inline-block;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    &:first-child{
                        color: #363636;
                        font-size: 16px;
                    }
                    &:last-child{
                        color: #C2C2C2;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    /*动态详情*/
    .dynamiclist-content{
        position: relative;
        width: 100%;
        border-bottom: 2px solid #f1f1f1;
        padding-bottom: 60px;
    }
    .contents-info{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 40px;
        align-items: center;
        span{
            &:first-child{
                // background-image: url('/images/翻译.png');
                background-repeat: no-repeat;
                background-size: 21px;
                padding-left: 3%;
                color: #373737;
                font-size: 14px;
                width: 100%;
            }
            // &:last-child{
            //     border:1px solid rgba(70,204,205,1);
            //     width: 14%!important;
            //     text-align: center;
            //     height: 20px;
            //     line-height: 20px;
            //     border-radius: 5px;
            //     color: #46CCCD;
            //     margin-left: 2%;
            // }
        }
    }
    .contents-infoimg{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        padding-left: 4%;
        justify-content: space-between;
        li{
            width: 28%;
            height: 180px;
            overflow: hidden;
            margin-top: 10px;
            img{
                width:auto;
                height:auto;
                max-width:100%;
                max-height:100%;
                border-radius: 15px;
            }
        }
    }
    .contents-infoimg::after{
        content: '';
        width: 0%;
        border:1px solid transparent;
    }
    .givealike{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        list-style: none;
        height: 40px;
        display: flex;
        padding: 0;
        padding-left: 4%;
        align-items: center;
        background-image: url('/images/点赞.png');
        background-repeat: no-repeat;
        background-size: 16px;
        background-position-x: 1%;
        background-position-y: 50%;
        overflow: hidden;
        li{
            width: auto;
        }
    }
    .operation{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        list-style: none;
        height: 40px;
        display: flex;
        padding: 0;
        padding-left: 4%;
        align-items: center;
        li{
            width: 10%;
            height: 40px;
            line-height: 40px;
            img{
                width: 16px;
                cursor: pointer;
            }
            span{
                margin-left: 20%;
                color: #B5B5B5;
                font-size: 14px;
            }
        }
    }
    .theInputcomments{
        position: relative;
        width: 86%;
        margin: 0 auto;
        display: flex;
        height: 40px;
        margin-top: 30px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 34px;
        }
        /deep/.el-input{
            width: 80%;
            margin-left: 2%;
            height: 30px;
        }
        span{
            display: inline-block;
            width: 10%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background:rgba(68,199,199,1);
            border-radius:10px;
            margin-left: 2%;
            color: #FFFFFF;
            font-size: 12px;
            cursor: pointer;
        }
    }
    .comments-content{
        position: relative;
        width: 86%;
        margin:  0 auto;
    }
    .comments-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 30px;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
        }
    }
    .comments-content>label>label,.reply-content>label>label{
        display: flex;
        width: 78%;
        height: 60px;
        align-items: center;
        font-size: 12px;
        &:first-child{
            width: auto;
        }
        &:last-child{
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            span{
                display: inline-block;
                width: 60%;
                height: 20px;
                line-height: 20px;
                margin-left: 2%;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    color: #C2C2C2;
                }
            }
        }
    }
    .reply-content{
        position: relative;
        width: 76%;
        margin:  0 auto;
    }
    .reply-content>label{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        img{
            width: 34px;
            height: 34px;
            border-radius: 20px;
        }
    }
    .reply-infos{
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        span{
            width: auto!important;
            &:last-child{
                width: 80%!important;
            }
        }
    }
    .load-more{
        position: relative;
        width: 100%;
        height: 40px;
        margin-top: 40px;
        text-align: center;
        cursor: pointer;
        line-height: 40px;
        color: #30C4C4;
        font-size: 14px;
    }
    .Summarylist-nodatads{
        position: relative;
        width: 100%!important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        label{
            width: 100%;
            text-align: center;
        }
        img{
            width: 39px!important;
            height: 39px!important;
        }
        span{
            display: inline-block;
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: #e7e7e7;
        }
    }
</style>